<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏</title>
		<style>
		*{
			font: 16px "微软雅黑";
			/* 去掉无序列表样式针对一切列表项标记 */
			text-decoration: none;
			/* 去掉无序列表样式 针对三项
			①列表项标记 list-style-type
		    ②列表项位置 list-style-position
			③列表项图片 list-style-image
			 */
			list-style: none;
			margin: 0;
			padding: 0;
		}
			aside{
			width: 235px;
			height: 460px;
			background: #ffbd37;
			/* 盒子模型 外边距 */
			margin: 25px 200px;
			}
					.ul_sidebar{
			list-style-type: none;
		}
			aside ul.ul_sidebar li{
			width: 235px;
			height: 46px;
			font: 20px;
		    text-align: center;
			line-height: 46x;
			position: relative;
		}
			aside ul.ul_sidebar li:hover{
			background: #d7ff22;
		}
		/* 挂靠点【活动】使用绝对定位，按照父级位置定位 */
		aside ul.ul_sidebar div.out{
			width: 400px;
			height: 460px;
			border: 1px solid red;
			/* 绝对定位 */
			position: absolute;
			left: 435px;
			
		}
		</style>
	</head>
	<body>
		<!-- html结构：外层div .sidebar
		              内层ul.ul_sidebar li*10
					  内容参照京东左栏第一个
			css结构：内部引入方式
					  通配选择器--合理添加
					  外层div.sidebar 235*460 背景
					  内层每个li加宽高 235*46
					  内层文本垂直居中对齐 文字：16px
					  鼠标移动上去li，
					  背景色改变
		 -->
		 
		<aside>
		<ul class="ul_sidebar">
			<!-- 弹出框 模式div＋别名-->
			<div class="out"></div>
			<li>手机</li>
			<li>电脑</li>
			<li>家居</li>
			<li>男装</li>
			<li>美妆</li>
			<li>女鞋</li>
			<li>男鞋</li>
			<li>房产</li>
			<li>母婴</li>
			<li>食品</li>
		</ul>
		</aside>
		
	</body>
	
</html>